<template>
  <div>
    <h2>{{msg}}</h2>
    <h2>{{msg.split("").reverse().join("")}}</h2>
    <h2>computed:{{reMsg}}</h2>
    <h2>method:{{reMsgF()}}</h2>
    <h2>{{reMsg}}</h2>
    <h2>:{{reMsg}}</h2>
    <h2>{{reMsgF()}}</h2>
    <h2>{{reMsgF()}}</h2>
    <input type="text" v-model="msg">
  </div>
</template>

<script>
import { computed,ref,watch } from "vue"
import"../assets/css/loading.css"
export default {
  setup(){
    const msg=ref("Hello Vue");
    //计算属性1-先演示计算属性的使用，语法、使用时括号问题
    const reMsg=computed(()=>{
        console.log("computed触发");
        return msg.value.split("").reverse().join("");
    });
    //计算属性2-再演示跟方法的区别，执行情况(计算属性有缓存)
    const reMsgF=()=>{
        console.log("methods触发");
        return msg.value.split("").reverse().join('');
    };
    //侦听器
    watch(msg,(newValue,oldValue)=>{
        console.log(`旧值是：${oldValue},新值是：${newValue}`);
    });
    return{
        msg,
        reMsg,
        reMsgF,
    };
  },
};
</script>
